<template>
  <div class="detail">
    <div class="title" style="display: flex; margin-bottom: 20px;">
      <div style="display: flex; align-items: baseline; flex: 1; text-align: left;font-size: 25px;">
        {{ modelInfo.eventName }}
        <!-- <p style="font-size: 16px;">
              <span style="padding: 0 10px">上报人：{{ modelInfo.createByName }}</span>
              <span style="padding: 0 10px">最新状态：医务科处置中</span>
              <span style="padding: 0 10px">当前处理人：【医务科1】</span>
            </p> -->
      </div>
      <div class="btn-list flex flex-row align-center">
        <el-button v-if="modelInfo.auditStatus === 2" type="warning" size="mini" @click="onWithdraw">撤回</el-button>
        <el-button type="primary" size="mini" @click="submitAction">导出PDF</el-button>
        <el-button type="info" size="mini" @click="handleClose">返回</el-button>
      </div>
    </div>
    <div class="dialog_main">
      <div class="body">
        <div class="body_left">
          <component :is="modelInfo.eventNo" ref="currentComponent" />
        </div>
        <div class="body_right">
          <RightTimeLine :process-info-list="modelInfo.processInfoList" />
          <InstructionsLine v-if="modelInfo.baqsjRecordMarkList.length" :baqsj-record-mark-list="modelInfo.baqsjRecordMarkList" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 诊疗相关-医疗处置事件
import DiagnosisMedicalHandle from '../apply/reportForm/diagnosisMedicalHandle.vue'
// 诊疗相关-报告异常，报告、标本差错事件
import DiagnosisSampleWrong from '../apply/reportForm/diagnosisSampleWrong.vue'
// 诊疗相关-饮食差错事件
import DiagnosisDietWrong from '../apply/reportForm/diagnosisDietWrong.vue'
// 诊疗相关-输液反应事件
import DiagnosisInfusionReaction from '../apply/reportForm/diagnosisInfusionReaction.vue'
// 意外事件-跌倒、坠床事件
import AccidentFall from '../apply/reportForm/accidentFall.vue'
// 意外事件-意外拔管事件
import AccidentTubeDrawing from '../apply/reportForm/accidentTubeDrawing.vue'
// 意外事件-烧烫伤事件
import AccidentBurnScald from '../apply/reportForm/accidentBurnScald.vue'
// 意外事件-其他意外事件
import AccidentOther from '../apply/reportForm/accidentOther.vue'
// 药物相关-药物不良反应事件
import MedicalBadReaction from '../apply/reportForm/medicalBadReaction.vue'
// 药物相关-给药错误事件
import MedicalWrongDrug from '../apply/reportForm/medicalWrongDrug.vue'
// 手术相关-手术不良事件
import SurgicalBad from '../apply/reportForm/surgicalBad.vue'
// 手术相关-非计划再次手术事件
import SurgicalNonPlaned from '../apply/reportForm/surgicalNonPlaned.vue'
// 防保相关-职业暴露不良事件
import PreventionAndProtection from '../apply/reportForm/preventionAndProtection.vue'
// 输血相关-用血错误事件
import TransfusionWrongBlood from '../apply/reportForm/transfusionWrongBlood.vue'
// 输血相关-输血反应事件
import TransfusionBloodReaction from '../apply/reportForm/transfusionBloodReaction.vue'
// 医患沟通相关-医患沟通（纠纷）事件
import DoctorAndPatientNegotiation from '../apply/reportForm/doctorAndPatientNegotiation.vue'
// 医疗器械相关-医疗器械事件
import MedicalInstrument from '../apply/reportForm/medicalInstrument.vue'
// 其他不良事件上报-公共事件
import OtherReactionPublic from '../apply/reportForm/otherReactionPublic.vue'
// 其他不良事件上报-治安事件
import OtherReactionPublicSecurity from '../apply/reportForm/otherReactionPublicSecurity.vue'
// 其他不良事件上报-其他事件
import OtherReactionGeneral from '../apply/reportForm/otherReactionGeneral.vue'
import { doRevoke } from '@/api/newBaqsj/newBaqsj'
import RightTimeLine from '@/views/newBaqsj/components/rightTimeLine.vue'
import InstructionsLine from '@/views/newBaqsj/components/instructionsLine.vue'
import { doQueryDetail } from '@/api/report/reportForm'
export default {
  name: 'ApplyDialog',
  components: {
    DiagnosisSampleWrong,
    DiagnosisMedicalHandle,
    DiagnosisDietWrong,
    DiagnosisInfusionReaction,
    AccidentFall,
    AccidentTubeDrawing,
    AccidentBurnScald,
    AccidentOther,
    MedicalBadReaction,
    MedicalWrongDrug,
    SurgicalBad,
    SurgicalNonPlaned,
    PreventionAndProtection,
    TransfusionWrongBlood,
    TransfusionBloodReaction,
    DoctorAndPatientNegotiation,
    MedicalInstrument,
    OtherReactionPublic,
    OtherReactionPublicSecurity,
    OtherReactionGeneral,
    RightTimeLine,
    InstructionsLine
  },
  props: {
    // dialogVisible: {
    //   type: Boolean,
    //   default: false
    // }
  },
  data() {
    return {
      detailId: this.$route.query.id,
      modelInfo: {
        eventName: '',
        eventNo: this.$route.query.eventNo || 'DiagnosisSampleWrong',
        processInfoList: [],
        baqsjRecordMarkList: []
      },
      openModel: 'DiagnosisSampleWrong'
    }
  },
  created() {
    this.getInit()
  },
  methods: {
    submitAction() {},
    getInit() {
    //   this.modelInfo = row
      doQueryDetail({ id: this.detailId, currentPage: 1, pageSize: 10 }).then(res => {
        if (res && res.records && res.records.length === 1) {
          this.modelInfo = res.records[0]
          console.log(this.modelInfo)
          // 调用组件中的方法
          this.$nextTick(() => {
            this.$refs.currentComponent.detail(res.records[0])
          })
        } else {
          this.$nextTick(() => {
            this.$refs.currentComponent.detail(this.modelInfo)
          })
        }
      })
    },
    // 撤回
    onWithdraw() {
      this.$confirm('撤销后，将终止当前上报不安全事件进程！仅保留详情和当前流转数据。', '撤销上报', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        doRevoke({ id: this.modelInfo.id }).then(response => {
          this.$message.success('撤销成功!')
          this.dialogVisible = false
          this.$parent.onSearch()
        })
      })
    },
    handleClose() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.detail {
    padding: 20px;
    box-sizing: border-box;
    height: calc(100vh - 50px);
    overflow: hidden;
}
.dialog_main {
    height: 100%;
    overflow: auto;
    .body {
        display: grid;
        grid-template-columns: 1fr 400px;
        &_right {
            min-height: 200px;
        }
    }
}
</style>
